<template>
  <view class="home-page" :style="{ height: navBarHeight + 'px', paddingTop: statusBarHeight + 'px' }">
    <view class="title">前端宝典</view>
    
    <!-- 轮播图区域 - 使用封装的组件 -->
    <view class="banner-section">
      <CardSwiper
        :list="bannerList"
        :side-margin="40"
        height="200px"
        :inactive-scale="0.85"
        @change="onSwiperChange"
      >
        <template #item="{ item, active }">
          <view 
            class="custom-banner-card" 
            :style="{ 
              background: `linear-gradient(135deg, ${item.gradient})`,
            }"
          >
            <!-- 装饰性背景元素 -->
            <view class="banner-bg-decoration">
              <view class="decoration-circle circle-1"></view>
              <view class="decoration-circle circle-2"></view>
              <view class="decoration-circle circle-3"></view>
            </view>
            
            <!-- 内容区域 -->
            <view class="banner-content">
              <view class="content-tag" :style="{ opacity: active ? 1 : 0.3 }">{{ item.tag }}</view>
              <text class="banner-title" :style="{ opacity: active ? 1 : 0.3 }">{{ item.title }}</text>
              <text class="banner-desc" :style="{ opacity: active ? 1 : 0.3 }">{{ item.desc }}</text>
              <view class="banner-stats" :style="{ opacity: active ? 1 : 0.3 }">
              </view>
            </view>
            
            <!-- 图标区域 -->
            <view class="banner-icon-wrapper" :style="{ opacity: active ? 1 : 0.4 }">
              <view class="icon-glow"></view>
              <img class="banner-icon" :src="item.icon" mode="aspectFit" />
            </view>
          </view>
        </template>
      </CardSwiper>
    </view>

    <!-- 功能卡片区域 -->
    <view class="feature-section">
      <view class="feature-card" v-for="item in featureList" :key="item.id" @click="handleFeature(item)">
        <view class="feature-header">
          <text class="feature-title">{{ item.title }}</text>
          <text class="feature-desc">{{ item.desc }}</text>
        </view>
        <view class="feature-btn" :class="item.btnColor">{{ item.btnText }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CardSwiper from '@/components/CardSwiper.vue'
import type { CardSwiperItem } from '@/types/card-swiper'
import VueIcon from '@/static/icons/Vue.png'
import ReactIcon from '@/static/icons/React.png'
import TypeScriptIcon from '@/static/icons/typescript.png'
import { useNavBar } from '@/hooks/useNavBar'

const { statusBarHeight, navBarHeight } = useNavBar()

// 轮播图数据 - 增强版
const bannerList = ref<CardSwiperItem[]>([
  {
    title: '精通 Vue.js 3',
    desc: '构建下一代响应式应用',
    tag: '热门推荐',
    icon: VueIcon,
    gradient: '#42b883, #35495e',
    lessons: '128+',
    students: '50k+'
  },
  {
    title: '掌握 React',
    desc: '组件化开发的艺术',
    tag: '进阶必学',
    icon: ReactIcon,
    gradient: '#61dafb, #282c34',
    lessons: '156+',
    students: '80k+'
  },
  {
    title: 'TypeScript 进阶',
    desc: '类型安全的开发体验',
    tag: '实战精选',
    icon: TypeScriptIcon,
    gradient: '#3178c6, #1e4c7a',
    lessons: '98+',
    students: '45k+'
  }
]);

// 轮播图切换事件
const onSwiperChange = (index: number) => {
  console.log('当前轮播索引:', index)
}

// 功能卡片数据
const featureList = ref([
  {
    id: 1,
    title: 'Vue 专题',
    desc: '从基础到进阶，全面掌握Vue技术栈，构建高性能的单页应用',
    btnText: '去刷题',
    btnColor: 'btn-green',
    searchText:'vue'

  },
  {
    id: 2,
    title: 'React 核心',
    desc: '深入理解React核心概念，学习Hooks、状态管理',
    btnText: '去刷题',
    btnColor: 'btn-blue',
    searchText:'react',
  },
  {
    id: 3,
    title: '前端AI运用',
    desc: '前端目前必不可少的AI运用，AI代码生成、AI代码优化等',
    btnText: '去刷题',
    btnColor: 'btn-purple',
    searchText:'ai',

  }
])



/**
 * 处理功能卡片点击
 */
const handleFeature = (item: any) => {
  console.log('点击功能卡片:', item.title);
  // 跳转到搜索页面
  uni.navigateTo({
    url: `/pages/search/search?keyword=${encodeURIComponent(item.searchText)}`
  });
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
  padding-left: 15px;
  margin-top: 20rpx;
}

.btn-green {
  background: linear-gradient(135deg, #4ade80, #16a34a);
}

.btn-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.btn-purple {
  background: linear-gradient(135deg, #a855f7, #7e22ce);
}

.home-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

// 顶部导航
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;

  .header-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #1f2937;
  }

  .header-menu {
    font-size: 40rpx;
    color: #6b7280;
  }
}

// 轮播图区域
.banner-section {
  padding: 30rpx 0;
  position: relative;

  .custom-banner-card {
    width: 100%;
    height: 100%;
    border-radius: 32rpx;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50rpx 40rpx;
    box-sizing: border-box;
    transition: box-shadow 0.4s ease;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);

    // 装饰性背景元素
    .banner-bg-decoration {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      pointer-events: none;
      border-radius: 32rpx;

      .decoration-circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10rpx);
        // animation: float 8s ease-in-out infinite;
      }

      .circle-1 {
        width: 200rpx;
        height: 200rpx;
        top: -80rpx;
        right: -50rpx;
        animation-delay: 0s;
      }

      .circle-2 {
        width: 150rpx;
        height: 150rpx;
        bottom: -60rpx;
        left: -40rpx;
        animation-delay: 2.5s;
      }

      .circle-3 {
        width: 100rpx;
        height: 100rpx;
        top: 50%;
        left: 30%;
        animation-delay: 5s;
        opacity: 0.5;
      }
    }

    // 内容区域
    .banner-content {
      flex: 1;
      z-index: 2;
      position: relative;

      .content-tag {
        display: inline-block;
        padding: 8rpx 20rpx;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10rpx);
        border-radius: 30rpx;
        font-size: 22rpx;
        color: #fff;
        font-weight: 600;
        margin-bottom: 16rpx;
        border: 1rpx solid rgba(255, 255, 255, 0.3);
        transition: opacity 0.4s ease;
      }

      .banner-title {
        display: block;
        font-size: 52rpx;
        font-weight: 800;
        color: #fff;
        margin-bottom: 12rpx;
        text-shadow: 
          0 2rpx 8rpx rgba(0, 0, 0, 0.2),
          0 4rpx 16rpx rgba(0, 0, 0, 0.15);
        letter-spacing: -0.5rpx;
        transition: opacity 0.4s ease;
      }

      .banner-desc {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.5;
        margin-bottom: 24rpx;
        text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
        transition: opacity 0.4s ease;
      }

      .banner-stats {
        display: flex;
        align-items: center;
        gap: 20px;
        height: 30px;
        transition: opacity 0.4s ease;

        .stat-item {
          display: flex;
          flex-direction: column;
          
          .stat-number {
            font-size: 32rpx;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
          }

          .stat-label {
            font-size: 22rpx;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 4rpx;
          }
        }

        .stat-divider {
          width: 2rpx;
          height: 40rpx;
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }

    // 图标区域
    .banner-icon-wrapper {
      position: relative;
      width: 120rpx;
      height: 120rpx;
      z-index: 2;
      transition: opacity 0.4s ease;

      .icon-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140rpx;
        height: 140rpx;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        border-radius: 50%;
        animation: pulse 3s ease-in-out infinite;
      }

      .banner-icon {
        width: 120rpx;
        height: 120rpx;
        position: relative;
        z-index: 3;
        object-fit: contain;
      }
    }
  }
}

// 动画定义
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(10deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

// 功能卡片区域
.feature-section {
  padding: 0 30rpx 30rpx;

  .feature-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: #fff;
    border-radius: 30rpx;
    padding: 20px;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

    .feature-header {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .feature-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #1f2937;
      }

    }

    .feature-btn {
      padding: 5px 10px;
      border-radius: 50rpx;
      color: #fff;
      white-space: nowrap;
    }

    .feature-desc {
      font-size: 28rpx;
      color: #6b7280;
      line-height: 1.6;
    }
  }
}
</style>
